<template>
    <div class="layout-padding" >
        <!-- 条件查询 -->
        <el-form :inline="true" :model="query" label-suffix=":">
            <el-form-item>
                <el-input v-model.trim="query.keyword" placeholder="请输入用户帐号/昵称/手机号" style="width:300px" />
            </el-form-item>
            <el-form-item>
                <el-button icon="ele-Search" type="primary" @click="handleQuery()">查询</el-button>
                <el-button icon="ele-Plus" type="success" @click="handleAddBefore()">新增用户</el-button>
            </el-form-item>
        </el-form>
        <el-table v-loading="loading" :height="tableHeight"
            ref="tableListRef" :data="tableList" border stripe show-overflow-tooltip >
            <el-table-column fixed="left" align="center" type="index" label="序号" width="60"></el-table-column>
            <el-table-column fixed="left" align="center" prop="nickName" label="用户昵称" width="130"></el-table-column>
            <el-table-column align="center" prop="username" label="用户帐号" min-width="90"></el-table-column>
            <el-table-column align="center" prop="mobile" label="手机号" min-width="90"></el-table-column>
            <el-table-column align="center" prop="email" label="邮箱" min-width="90"></el-table-column>
            <el-table-column sortable align="center" prop="accountNonLocked" label="帐号锁定" min-width="90">
                <template #default="{row}">
                    <el-tag v-if="row.accountNonLocked" type="success">正常</el-tag>
                    <el-tag v-else type="danger">锁定</el-tag>
                </template>
            </el-table-column>
            <el-table-column sortable align="center" prop="accountNonExpired" label="帐号过期" min-width="90">
                <template #default="{row}">
                    <el-tag v-if="row.accountNonExpired" type="success">正常</el-tag>
                    <el-tag v-else type="danger">过期</el-tag>
                </template>
            </el-table-column>
            <el-table-column sortable align="center" prop="credentialsNonExpired" label="密码过期" min-width="90">
                <template #default="{row}">
                    <el-tag v-if="row.credentialsNonExpired" type="success">正常</el-tag>
                    <el-tag v-else type="danger">过期</el-tag>
                </template>
            </el-table-column>
            <el-table-column sortable align="center" prop="createTime" label="创建时间"></el-table-column>
            <el-table-column fixed="right" align="center" label="操作" width="260">
                <template #default="{row}">
                    <el-button type="warning" link icon="ele-Edit" @click="handleEdit(row)">修改</el-button>
                    <el-button type="primary" link icon="ele-Key" @click="handlePwd(row)">密码重置</el-button>
                    <el-popconfirm :title="`确定删除【${row.nickName}】吗？`" @confirm="handleDelete(row)">
                        <template #reference>
                            <el-button type="danger" link icon="ele-Delete">删除</el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <m-page :page="page" @pageChange="queryData"></m-page>
        <!-- 新增/修改组件 -->
        <UserEdit ref="editRef" @refresh="queryData"></UserEdit>
        <!-- 密码重置 -->
        <Password ref="passwordRef"></Password>
    </div>
</template>

<script setup lang="ts">
import useTablePage from '@/hooks/useTablePage';
import { getPageList, deleteById } from '@/api/system/user';
import { defineAsyncComponent, ref } from 'vue';
import { auth } from '@/utils/authFunction'
import { msg } from '@/utils/element'

const UserEdit = defineAsyncComponent(() => import('./UserEdit.vue'))
const Password = defineAsyncComponent(() => import('./components/Password.vue'))

const {
    tableListRef, editRef,
    loading, query, page, tableList, tableHeight,
    queryData, handleQuery, handleAdd,
    handleEdit, handleDelete
} = useTablePage<SysUserType, SysUserQuery>({getPageList, deleteById});

// 密码重置ref
const passwordRef = ref()

// 点击密码重置
function handlePwd(user: SysUserType) {
    passwordRef.value.open(user)
}

function handleAddBefore() {
    if (!auth('system:user:add')) return msg('对不起，您没有权限')
    msg('恭喜，您有权限', {type: 'success'})
    handleAdd()
}
</script>

<style scoped>

</style>